<template>
	<el-card>
		<div slot="header">
			<span>公告列表</span>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="#" type="index" prop="notice_id">
			</el-table-column>
			<el-table-column prop="title" label="标题">
			</el-table-column>
			<el-table-column prop="create_time" label="发布日期">
			</el-table-column>
			<el-table-column prop="update_time" label="更新日期">
			</el-table-column>
			<el-table-column prop="is_sticky" label="是否置顶">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.is_sticky === 1" type="success">置顶</el-tag>
					<el-tag v-if="scope.row.is_sticky === 0" type="warning">正常</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button v-permission="'notice:list:edit'" icon="el-icon-edit" @click="openEditEdge(scope.row)">编辑</el-button>
					<el-button v-permission="'notice:list:switch'" icon="el-icon-top"
						@click="handleChange(scope.row.is_sticky, scope.row.notice_id, scope.$index)">{{ scope.row.is_sticky
							=== 1 ? '取消' : '置顶' }}</el-button>
					<el-button v-permission="'notice:list:remove'" type="danger" icon="el-icon-delete"
						@click="handleRemove(scope.row.notice_id, scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script>
import { Notice } from '@/api';
export default {
	data() {
		return {
			tableData: [],
		}
	},
	created() {
		this.loadList();
	},
	methods: {
		// 加载列表
		async loadList() {
			let { status, msg, data } = await Notice.list({ pagesize: 20 });
			if (status) {
				this.tableData = data;
			}
		},
		// 编辑
		openEditEdge(notice) {
			let { notice_id } = notice;
			this.$router.push(`edit/${notice_id}`);
		},
		// 置顶
		handleChange(is_sticky, notice_id, index) {
			if (is_sticky === 1) {
				this.$confirm('此操作将禁用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let unusable = 0;
						let { status, msg } = await Notice.stick({ notice_id, is_sticky: unusable });
						if (status) {
							this.tableData[index].is_sticky = unusable;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
			if (is_sticky === 0) {
				this.$confirm('此操作将启用该标签, 是否继续?', '确认', { type: 'warning' })
					.then(async () => {
						let unusable = 1;
						let { status, msg } = await Notice.stick({ notice_id, is_sticky: unusable });
						if (status) {
							this.tableData[index].is_sticky = unusable;
							this.$message.success(msg);
						} else {
							this.$message.error(msg);
						}
					})
			}
		},
		// 删除
		handleRemove(notice_id, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					//删除标签
					let { status, msg } = await Notice.remove({ notice_id });
					if (status) {
						//操作DOM
						this.tableData.splice(index, 1);
						//信息提示
						this.$message.success(msg);
					} else {
						//信息提示
						this.$message.error(msg);
					}
				}).catch(() => {
					this.$message.info('已取消删除');
				});
		},
	},
}
</script>

<style></style>
